<template>
  <f7-page>
    <f7-navbar title="订单查询" back-link="Back"></f7-navbar>
    <f7-list inline-labels no-hairlines-md>
      <f7-list-input
        label="姓名"
        type="text"
        :value="name"
        @input="name = $event.target.value"
        required
        validate
        clear-button
      ></f7-list-input>
      <f7-list-input
        label="手机号"
        type="text"
        clear-button
        required
        validate
        :value="center"
        @input="center = $event.target.value"
      ></f7-list-input>
      <mt-button :disabled="disabled" type="primary" @click="query">查询</mt-button>
    </f7-list>
  </f7-page>
</template>
<script>
export default {
  computed: {
    disabled() {
      return !(this.name && this.center);
    }
  },
  data() {
    return {
      name: "",
      center: ""
    };
  },
  methods: {
    query() {
      let ordercondition = {
        name: this.name,
        center: this.center
      };
      this.$store.commit("setordercondition", ordercondition);
      this.$f7router.navigate("/orderList/");
    }
  }
};
</script>
<style  scoped>
.mint-button {
  display: block;
  width: 90%;
  margin: 0 5% 0 5%;
  margin-top: 19%;
  height: 41px;
}
</style>
